<template>
	<div class="localize">
		<div class="localizeContainer">
			<div class="localizeHeader">
				<i class="iconfont icon-sousuo sousuo"></i>
				<input type="text" placeholder="请输入城市名或拼音">
			</div>
			<div class="localizeContent">
				<div class="rightNav">
					<ul>
						<li v-for="(item,index) in citydatas" :key='index'>{{ item.initial }}</li>
					</ul>
				</div>
				<div class="currentLocalize">
					<h2>当前定位</h2>
					<p class="beijing"><span>北京市</span></p>
					<h2>热门城市</h2>
					<p class="cityHot">
						<ul>
							<li v-for='(cityhot,index) in cityhots' :key='index'
							@click="localHotPlace(cityhot.name)">
								<span >{{ cityhot.name }}</span>
							</li>
						</ul>
					</p>
				</div>
				<div class="cityListA">
					<ul class="listA">
						<li class="listHeader" v-for="(item,index) in citydatas"  :key='index'>
							<span>{{ item.initial }}</span>
							<ul class="detailCity" v-for="(city,index) in item.list" :key='index'>
								<li @click="localPlace(item.list[index].name)">
									{{ city.name }}
								</li>
							</ul>
						</li>
					</ul>
						
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import CityData from "../../assets/data/cityData.json"
import CityHot from "../../assets/data/hotcity.json"
export default{
	name:'localize',
	data(){
		return{
			citydatas:CityData,
			cityhots:CityHot
		}
	},
	methods:{
		localPlace(place){
			this.$router.push({
				name:'home',
				params:{
					localPlace1:place
				}
			})
		},
		localHotPlace(hotcity){
			this.$router.push({
				name:'home',
				params:{
					localPlace2:hotcity
				}
			})
		}
	}
}
</script>
<style scoped lang="less">
.localize{
	width: 100%;
	height: auto;
	.localizeContainer{
		width: 100%;
		box-sizing: border-box;	
		// background-color: #ff5555;
		// overflow: hidden;
		.localizeHeader{
			width: 100%;
			height: 88/100rem;
			border:none;
			background: #ff5555;
			// overflow: hidden;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;
			right:0;  
			z-index: 666;
			.sousuo{
				position: absolute;
				top:26/100rem;
				left:96/100rem;
				font-size: 18 / 50rem;
				font-weight: 700;
				color: rgba(0,0,0,.7);
			}
			input{
				width: 600/100rem;
				height: 56/100rem;
				border-radius: 6/50rem;
				border:none;
				outline: none;
				color: rgba(0, 0, 0, 0.7);
				line-height:56/100rem;
				font-size: 15 / 50rem;
				text-indent: 62 / 100rem;
				font-weight: 700;
				margin: 16/100rem 76/100rem 14/100rem 76/100rem;	
			}
		}
		.localizeContent{
			height: 1206/100rem;
			margin-top: 118 / 100rem;
			position: relative;
			.rightNav{
				height: auto;
				padding: 0 20/100rem;
				box-sizing: border-box;	
				position: fixed;
				right: 0;
				ul{	
					position: absolute;
					top:82/100rem;
					right:32/100rem;
					li{
						width: 16/100rem;
						height: 16/100rem;
						font-size: 24 / 100rem;
						color: rgba(0, 0, 0, 0.8);
						margin-bottom: 26/100rem;
						box-sizing: border-box;	
					}
				} 
				
			}
			.currentLocalize{
				margin-left: 40 / 100rem;
				margin-top: 30 / 100rem;
				box-sizing: border-box;	
				h2{
					font-size: 26 / 100rem;
					color: rgba(0, 0, 0, 0.7)
				}
				.beijing{
					margin-left: 44 / 100rem;
					margin-top:30 / 100rem;
					margin-bottom: 30 / 100rem;
					width: 138 / 100rem;
					height: 50 / 100rem;
					text-align: center;
					line-height: 50 / 100rem;
					border-radius: 8 / 100rem;
					background-color: rgba(0, 0, 0, 0.1);
					box-sizing: border-box;	
					span{
						color:rgba(0, 0, 0, 0.7);
						font-size: 24 / 100rem;
					} 
				}
				.cityHot{
					margin-left: 44 / 100rem;
					margin-top:30 / 100rem;
					margin-bottom: 29 / 100rem;
					overflow: hidden;
					box-sizing: border-box;	
					ul li{
						float: left;
						width: 138 / 100rem;
						height: 50 / 100rem;
						text-align: center;
						line-height: 50 / 100rem;
						border-radius: 8 / 100rem;
						background-color: rgba(0, 0, 0, 0.1);
						margin-bottom: 35 / 100rem;
					}
					ul li:nth-child(2),ul li:nth-child(5),ul li:nth-child(8){
						margin-left: 84 / 100rem;
						margin-right: 84 / 100rem;
					}
					ul li:nth-child(7),ul li:nth-child(8),ul li:nth-child(9){
						margin-bottom: 0;
					}
				}
			}
			.cityListA{
				overflow: hidden;
				box-sizing: border-box;	
				// width: 100%;
				.listA{
					width: 100%;
					overflow: hidden;
					box-sizing: border-box;	
					.listHeader{
						height: auto;
						vertical-align: middle;
						box-sizing: border-box;	
						span{
							display: inline-block;
							padding-left: 41 / 100rem;
							width: 100%;
							height: 40 / 100rem;
							line-height: 40 / 100rem;
							color:#fff;
							background-color: #ff5555;
							box-sizing: border-box;	
						}
						.detailCity{
							width: 100%;
							padding-left: 41 / 100rem;
							box-sizing: border-box;	
							overflow: hidden;
							li{	
								width: 646 / 100rem;
								border-bottom: 2 /100rem solid #e5e5e5;
								padding-top: 18 / 100rem;
								padding-bottom: 18 / 100rem;
								box-sizing: border-box;	
								overflow: hidden;
							}
						}
						
					}
				}
			}
		}
	}
}
</style>